<template>
  <el-dialog :title="!dataForm.orderNumber ? '新增' : '查看'" :close-on-click-modal="false" :visible.sync="visible" width="80%">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <div class="main">
        <div class="content">
          <div class="order-number">
            <div class="num-cont">
              <el-form-item label="会员名称:">
                <span class="text">{{dataForm.userName}}</span>
              </el-form-item>
            </div>
          </div>
          <div class="order-state">
            <div class="state-cont">
                <el-table :data="dataForm.userIndentifyItems" border>
                  <!--
                  <el-table-column prop="" label="证件照片" >
                    <template slot-scope="scope">
                      <div >
                        <img :src="scope.row.userIndentifyPic"  width="100" height="100"/>
                      </div>
                    </template>
                  </el-table-column>
                  -->
                  <!--
                  <el-table-column
                      prop="images"
                      label="证件照片"
                      width="180">
                    <template slot-scope="scope">
                      <img :src="scope.row.userIndentifyPic" style="width:100px;height:50px;"/>
                    </template>
                  </el-table-column>
                  -->

                  <el-table-column
                      label="图片"
                      prop="UserIndentifyPic"
                      align="center"
                      width="700"
                  >
                    <template slot-scope="scope">
                      <el-image
                          :src="scope.row.userIndentifyPic"
                          :preview-src-list="scope.row.userIndentifyPic">
                      </el-image>
                    </template>
                  </el-table-column>

                  <el-table-column prop="userIndentifyType" label="证件类型" width="180" align="center">
                    <template slot-scope="scope">
                      <span>{{scope.row.userIndentifyType}}</span>
                    </template>
                  </el-table-column>

                  <el-table-column label="操作"  width="150">
                    <template slot-scope="scope">
                      <el-button type="primary"
                                 icon="el-icon-delete"
                                 size="small"
                                 @click.stop="deleteHandle(scope.row.id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <!-- 弹窗, 新增 / 修改 -->
    <!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
    <!-- <devy-add v-if="devyVisible" ref="devyAdd"  @refreshDataList="getDataList"></devy-add> -->
  </el-dialog>
</template>

<script>
  // import AddOrUpdate from './order-addr'
  // import DevyAdd from './order-devy'
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          userId: '',
          userName: '',
          userIndentifyItems: []
        },
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        addOrUpdateVisible: false,
        devyVisible: false
      }
    },
    components: {
      // AddOrUpdate,
      // DevyAdd
    },
    watch: {
      visible: function () {
        if (!this.visible) {
          this.devyVisible = false
          this.addOrUpdateVisible = false
        }
      }
    },
    computed: {
    },
    methods: {
      init(id) {
        console.info(id)
        this.dataForm.userId = id || 0
        console.info(this.dataForm.userId)
        this.visible = true
        this.$nextTick(() => {
          this.$refs.dataForm.resetFields()
        })
        if (this.dataForm.userId) {
          console.info("beg http");
          this.$http({
            url: this.$http.adornUrl(`/admin/user/userIndentify/${this.dataForm.userId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            console.info("end http");
            console.info(data);
            this.dataForm = data
          })
        }
      },
      getDataList() {
        this.$http({
          url: this.$http.adornUrl(`/admin/user/userIndentify/${this.dataForm.userId}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.dataForm = data
        })
      },
      deleteHandle(id) {
        var ids = [id]
        this.$confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(() => {
              this.$http({
                url: this.$http.adornUrl('/admin/user/delUserIndentify'),
                method: 'delete',
                data: this.$http.adornData(ids, false)
              }).then(({data}) => {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.init(this.dataForm.userId)
                  }
                })
              })
            })
            .catch(() => {
            })
      },
      auditHandle(id) {
        var ids = [id]
        this.$confirm(`确定进行[${id ? '审核' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(() => {
              this.$http({
                url: this.$http.adornUrl(`/admin/user/audit/${this.dataForm.userId}`),
                method: 'put',
                data: {}
              }).then(({data}) => {
                this.$message({
                  message: '审核成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.init(this.dataForm.userId)
                  }
                })
              })
            })
            .catch(() => {
            })
      }
    }
  }
</script>


<style>
.main {
  height: 100%;
  width: 100%;
  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti,
    "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #495060;
}

.content {
  margin: 0 20px;
}

.content .steps {
  margin-top: 50px;
}

.order-number .number-text {
  font-weight: bold;
}

.order-number .text {
  font-size: 14px;
  color: #8a8a8a;
}

.order-state .state-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-left span {
  font-weight: bold;
}

.title-left .text {
  color: red;
}

.state-title .title-mid {
  display: flex;
  align-items: center;
}

.title-mid img {
  width: 18px;
  height: 18px;
}

.title-mid .mid-text {
  color: red;
}

.title-mid .text {
  color: #8a8a8a;
}

.content .order-state {
  position: relative;
  margin-top: 50px;
  border-bottom: 1px solid #e9eaec;
}

.order-state .order-info {
  width: 100%;
  border-top: 1px solid #e9eaec;
  margin: 50px 0;
  display: flex;
}

.order-info img {
  width: 18px !important;
  height: 18px !important;
  margin-right: 15px;
}

.order-info .detail-title {
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
}

.order-info .order-details {
  width: 50%;
  border-right: 1px solid #e9eaec;
}

.order-info .detail-cont {
  position: relative;
}

.detail-cont .detail01 {
  display: flex;
  height: 100%;
  line-height: 25px;
  margin-top: 15px;
}

.detail01 .text-width {
  width: 100%;
}

.detail02 .text-width {
  width: 100%;
}

.detail-cont .revise-addr {
  color: #4395ff;
  position: absolute;
  top: 15px;
  right: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.order-info .detail-cont {
  border-top: 1px dashed #e9eaec;
  margin: 15px 20px 0 0;
}

.order-info .buyers {
  width: 50%;
  margin-left: 20px;
}

.buyers .buyers-info {
  border-top: 1px dashed #e9eaec;
  margin-top: 15px;
  position: relative;
}

.buyers .detail02 {
  display: flex;
  height: 100%;
  line-height: 25px;
  margin-top: 15px;
}

.buyers .revise-remarks {
  color: #4395ff;
  position: absolute;
  top: 15px;
  right: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.order-state .item-info {
  padding-left: 80%;
  margin: 25px 0;
}

.item-info span {
  margin-bottom: 15px;
  line-height: 30px;
}

.item-info .text {
  position: absolute;
  right: 0;
}

.item-info .amount {
  font-size: 18px;
  color: red;
}

.order-log .log-title {
  height: 50px;
  width: 100%;
  line-height: 50px;
  font-weight: bold;
  /* border-bottom: 1px dashed #e9eaec; */
}

.order-log .log-cont {
  /* margin-top: 15px; */
  color: #4395ff;
}
.order-log .log-cont .el-form-item__content {
  line-height: 1.5em;
}

.item-list .prod-con {
  display: flex;
}
.item-list .prod-con .prod-img {
  width: 100px;
  height: 100px;
  margin-right: 8px;
}
</style>



